<template>
  <a-modal
    :visible="show"
    width="40vw"
    height="60vh"
    :bodyStyle="{ padding: '10px' }"
    title="供应商选择"
    @ok="handleOk"
    @cancel="handleCancel"
    :footer="null"
  >
    <div style="display: flex; padding: 5px 0px 5px 0px">
      <a-input placeholder="输入供应商编号或名称筛选" v-model="pagination.keywords" style="width: 250px" />
      <a-button @click="fetchList" class="hte-btn">查询</a-button>
    </div>
    <a-table
      :data-source="records"
      :columns="columns"
      :rowKey="
        (record, index) => {
          return index
        }
      "
      bordered
      :pagination="false"
      @change="tableChange"
      :customRow="customRow"
    >
    </a-table>
    <a-pagination
      show-size-changer
      :default-current="1"
      :total="pagination.total"
      @change="pageChange"
      @showSizeChange="onShowSizeChange"
      :show-total="(total) => `共 ${total} 条记录`"
    />
  </a-modal>
</template>
<script>
import { getAction, postAction, postActionAsync } from '@/api/manage'
export default {
  components: {},
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      columns: [
        {
          title: '供应商编号',
          dataIndex: 'sp_no',
          width: '150px',
          align: 'center',
        },
        {
          title: '供应商名称',
          dataIndex: 'sp_name',
          align: 'left',
        },
      ],
      urls: {
        loadSuppliers: '/hte/contract/loadSuppliers',
      },
      pagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        total: 0,
      },
      pageSizeOptions: ['10', '20', '30'],
      records: [],
      currentRow: {},
    }
  },
  mounted() {},
  computed: {
    loadList() {
      return this.show
    },
  },
  methods: {
    customRow(record) {
      return {
        on: {
          dblclick: (event) => {
            this.currentRow = record
            this.handleOk()
          },
          click: (event) => {
            this.currentRow = record
          },
        },
      }
    },
    fetchList() {
      let params = {}
      params.pageSize = this.pagination.pageSize
      params.pageNo = this.pagination.current
      params.keywords = this.pagination.keywords
      postAction(this.urls.loadSuppliers, params).then((res) => {
        if (res.success) {
          this.records = res.result.records
          this.$set(this.pagination, 'total', res.result.total)
        }
      })
    },
    /**
     * 表结构切换页码
     */
    tableChange(pagination, filters, sorter) {
      this.pagination = pagination
      this.pagination.pageNo = this.pagination.current
      this.fetchList()
    },
    handleOk() {
      this.$emit('close', this.currentRow)
    },
    handleCancel() {
      this.$emit('close')
    },
    pageChange(pageNo, pageSize) {
      this.$set(this.pagination, 'pageSize', pageSize)
      this.$set(this.pagination, 'pageNo', pageNo)
      this.fetchList()
    },
    onShowSizeChange(current, pageSize) {
      this.pagination.current = 1
      this.pagination.pageSize = pageSize
      this.fetchList()
    },
  },
  watch: {
    loadList(newV, oldV) {
      if (newV) {
        this.$set(this.pagination, 'current', 1)
        this.fetchList()
      }
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.page-main {
  .container {
    .content {
      margin-top: 20px;
      section {
        .section-table {
          .add-btn {
            margin-left: 0;
            margin-bottom: 10px;
          }
        }
      }
    }
  }
  .tips-box {
    margin-top: 32px;
    .add-btn {
      width: 180px;
      height: 40px;
      line-height: 40px;
      background-color: #4095e4;
      border-radius: 2px;
    }
  }
}
.icon-file {
  background-image: url('~@assets/file.png');
}
.cr-content-pop {
  p {
    margin-bottom: 15px;
    color: #666;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>